<template>
  <div class="table-all">
    <!-- 搜索区 -->
    <div class="app-container search-box">
      <SearchForm
        :form="searchData.form"
        :options="searchData.options"
        @searchUpdate="search"
        @resetSearchData="resetSearchData"
      ></SearchForm>
    </div>
    <div class="app-container" style="color: #606266">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="title">总体汇总情况</div>
          <el-row :gutter="10" v-for="itemList in summaryData.left">
            <el-col :span="5" class="col" v-for="item in itemList">
              <div class="div_title">{{item.key}}</div>
              <div class="div_num">{{item.value}}</div>
            </el-col>
          </el-row>
          <!--<el-row :gutter="10">-->
            <!--<el-col :span="5" class="col">-->
              <!--<div class="div_title">共性问题指标</div>-->
              <!--<div class="div_num">{{summaryData.allNum}}</div>-->
            <!--</el-col>-->
            <!--<el-col :span="5" class="col">-->
              <!--<div class="div_title">城区</div>-->
              <!--<div class="div_num">{{summaryData.urbanNum}}</div>-->
            <!--</el-col>-->
            <!--<el-col :span="5" class="col">-->
              <!--<div class="div_title">街区</div>-->
              <!--<div class="div_num">{{summaryData.streetNum}}</div>-->
            <!--</el-col>-->
            <!--<el-col :span="5" class="col">-->
              <!--<div class="div_title">街区</div>-->
              <!--<div class="div_num">{{summaryData.streetNum}}</div>-->
            <!--</el-col>-->
          <!--</el-row>-->
          <!--<el-row :gutter="10">-->
            <!--<el-col :span="5" class="col">-->
              <!--<div class="div_title">住房</div>-->
              <!--<div class="div_num">{{summaryData.houseNum}}</div>-->
            <!--</el-col>-->
            <!--<el-col :span="5" class="col">-->
              <!--<div class="div_title">社区</div>-->
              <!--<div class="div_num">{{summaryData.communityNum}}</div>-->
            <!--</el-col>-->
            <!--<el-col :span="5" class="col">-->
              <!--<div class="div_title">城中村</div>-->
              <!--<div class="div_num">{{summaryData.villagesNum}}</div>-->
            <!--</el-col>-->
            <!--<el-col :span="5" class="col">-->
              <!--<div class="div_title">街区</div>-->
              <!--<div class="div_num">{{summaryData.streetNum}}</div>-->
            <!--</el-col>-->
          <!--</el-row>-->
        </el-col>
        <el-col :span="12">
          <div class="title">预警比例统计情况</div>
          <el-row :gutter="10">
            <el-col :span="7" class="col">
              <div class="div_title">≥70%</div>
              <div class="div_num">{{summaryData.right.ge70}}</div>
            </el-col>
            <el-col :span="7" class="col">
              <div class="div_title">≥60%且<70%</div>
              <div class="div_num">{{summaryData.right.ge60lt70}}</div>
            </el-col>
            <el-col :span="7" class="col">
              <div class="div_title">≥50%且<60%</div>
              <div class="div_num">{{summaryData.right.ge50lt60}}</div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="7" class="col">
              <div class="div_title">≥40%且<50%</div>
              <div class="div_num">{{summaryData.right.ge40lt50}}</div>
            </el-col>
            <el-col :span="7" class="col">
              <div class="div_title">≥30%且<40%</div>
              <div class="div_num">{{summaryData.right.ge30lt40}}</div>
            </el-col>
            <el-col :span="7" class="col">
              <div class="div_title"><30%</div>
              <div class="div_num">{{summaryData.right.lt30}}</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <!-- 按钮区 -->
    <div class="app-container table-box">
      <div class="table-main">
        <!-- 表格 -->
        <v-table
          title="共识问题识别信息"
          v-if="tableMainHeight>0"
          :table-columns="tableColumns"
          :table-data="tableData"
          :loading="loading"
          :is-index="true"
          ref="table"
          :maxHeight="tableMainHeight">
          <template #topButtonList>
            <ButtonForm :buttonList="buttonList" @clickButton="clickButton"></ButtonForm>
          </template>
          <template #checkType="scope">
            {{getDictValue(scope.row.checkType, cityCheckTypeOptions)}}
          </template>
          <template #result="scope">
            {{ getResultLabel(scope.row)}}
          </template>
          <template #operation="scope">
            <a class="table-btn-view table-operation"
               @click="handleDetail(scope.row)">{{$t('table.view')}}</a>
          </template>
        </v-table>
      </div>
      <div class="table-page">
        <!-- 页码 -->
        <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                    @pagination="search"/>
      </div>
    </div>
    <!-- 详情 -->
    <detailDialog :dialog-visible="detailDialogShow"
                  @close="editClose"
                  :openType="detailOpenType"
                  :threeTargetNo="threeTargetNo"
                  :title="detailTitle"
                  :year="year"
                  :resultType="resultType"
                  :cityCheckTypeOptions = "cityCheckTypeOptions"
    ></detailDialog>
  </div>
</template>

<script>
  import { publicProblem,
    publicProblemExport
  } from '@/api/risk/cityWaringResult'
  import { getAreaList } from '@/api/system/area'
  import SearchForm from '@/components/searchForm/index'
  import ButtonForm from '@/components/ButtonForm/index'
  import VTable from '@/components/VTable/index'
  import Pagination from '@/components/Pagination/index'
  import detailDialog from '../indicatorDiagnosis/detail'
  export default {
    components:{
      VTable,Pagination,SearchForm,ButtonForm,detailDialog
    },
    data(){
      return{
        summaryData:{
          left: [[{key: "共性问题指标", value: 0}]],
          right: {
            ge70:0,
            ge60lt70:0,
            ge50lt60:0,
            ge40lt50:0,
            ge30lt40:0,
            lt30:0
          }
        },
        tableColumns:[
          {
            prop: 'threeTargetName',
            label: '体检指标名称',
            minWidth: '150',
            slotname: 'threeTargetName',
            options: {}
          },
          {
            prop: 'checkType',
            label: '体检分类',
            minWidth: '100',
            slotname: 'checkType',
            options: {}
          },
          {
            prop: 'oneTargetName',
            label: '指标大类',
            minWidth: '150',
            slotname: 'oneTargetName',
            options: {}
          },
          {
            prop: 'twoTargetName',
            label: '指标细类',
            minWidth: '150',
            slotname: 'twoTargetName',
            options: {}
          },
          {
            prop: 'criterion',
            label: '评分标准',
            minWidth: '150',
            slotname: 'criterion',
            options: {}
          },
          {
            prop: 'year',
            label: '年份',
            minWidth: '100',
            slotname: 'year',
            options: {}
          },
          {
            prop: 'rate',
            // label: '不达标或预警比例',
            label: '预警比例',
            minWidth: '100',
            slotname: 'rate',
            options: {}
          },
          {
            prop: 'city',
            // label: '不达标或预警城市',
            label: '预警城市',
            minWidth: '200',
            slotname: 'city',
            options: {}
          },
          {
            prop: 'operation',
            label: '操作',
            width: '150',
            align: 'center',
            slotname: 'operation',
            overflow: false,
            fixed: 'right'
          }
        ],
        tableData:[],
        selection: [],
        loading:false,
        total:1,
        pageNum:1,
        pageSize:10,
        detailOpenType:"add",
        detailDialogShow:false,
        detailId:"",
        detailTitle:"新增",
        year:"",
        threeTargetNo:"",
        resultType:"",
        dict:{},
        searchData:{
          form:{
            year: new Date().getFullYear()+'',
            checkType:"",
            rate:'',
          },
          options:[
            {
              title:'年份',
              key: "year",
              type: "dateYear",
            },
            {
              title:'体检分类',
              key: "checkType",
              type: "select",
              multiple:false,
              option: {
                data: this.cityCheckTypeOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            {
              title:'比例值(%)',
              key: "rate",
              type: "text",
              placeholder:"请输入不达标或预警比例(%)"
            },
          ]
        },
        buttonList:[
          {name:'导出数据',methods:'handleExport', type:'primary',  hasPremission:["publicProblem:export"]}
        ],
        tableMainHeight: 0,
        // 字典
        cityCheckTypeOptions:[],
        cityCheckResultTypeOptions: [],
      }
    },
    watch: {
      'cityCheckTypeOptions':{
        handler(newVal, oldVal){
          if(newVal){
            this.searchData.options.forEach(t=>{
              if(t.key == 'checkType'){
                // t.option.data = newVal
                // 过滤满意度
                t.option.data = newVal.filter(t=>t.value!=3)
              }
            })
          }
        }
      }
    },
    methods:{
      getResultLabel(row){
        return this.getDictValue(row.result, this.cityCheckResultDict[row.resultType])
      },
      handleDetail(row){
        console.log("row======>",row)
        this.threeTargetNo = row.threeTargetNo
        this.year = this.searchData.form.year
        this.resultType= row.resultType
        this.detailId = row.id
        this.detailOpenType = "detail"
        this.detailTitle="详情"
        this.detailDialogShow = true
      },
      getDictValue(value,option){
        let item = option.find(t=> t.value == value)
        if(item!=undefined){
          return item.label
        }
        return value
      },
      editClose(){
        this.detailDialogShow = false
      },
      search(){
        this.fetch({
          ...this.searchData.form,
        })
      },
      fetch(params={}){
        if(!params.rate){
          if(Object.keys(params).length!=0){
            this.$message.warning("请填写比例")
          }
          return
        }
        params.pageSize = this.pageSize
        params.pageNum = this.pageNum
        this.loading = true
        publicProblem(params).then(res=>{
          if(res.code==200){
            this.total = res.data.total
            this.tableData = res.data.rows
            this.summaryData = res.data.summaryData
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        }).finally(final=>{
          this.loading = false
        })
      },
      // 重置搜索条件
      resetSearchData(){
        this.searchData.form = {
          year: new Date().getFullYear()+'',
          checkType:"",
          rate:'',
        }
        this.search()
      },
      // 触发按钮区域按钮方法
      clickButton(methods){
        this[methods]()
      },
      handleExport(){
        let params = {
          ...this.searchData.form
        }
        if(!params.rate){
          if(Object.keys(params).length!=0){
            this.$message.warning("请填写比例")
          }
          return
        }
        publicProblemExport(params,`共性问题识别_${new Date().getTime()}.xlsx`);
      },
      closeDialog(){
        this.detailDialogShow = false
      },
    },
    activated(){
      this.fetch()
    },
    created(){
      // 获取字典值
      this.cityCheckTypeOptions = []
      this.$commonJs.filterDataDict("cityCheckType",this.cityCheckTypeOptions)
      this.$commonJs.setLeftMenuHidden(this)
    },
    mounted(){
      this.tableMainHeight = document.getElementsByClassName('table-main')[0].clientHeight - 44 //减去顶部按钮列表的高度
    }
  }
</script>

<style lang="scss" scoped>
  .table-all {
    display: flex;
    flex-direction: column;
    height: 100%;

    .search-box {
      padding-bottom: 6px;
    }

    .table-box {
      padding-top: 10px;
      flex: 1;
      display: flex;
      flex-direction: column;

      .table-main {
        flex: 1;
        overflow: auto;
      }

      .table-page {
        // padding-top: 10 px;
        // padding-bottom: 10 px;
      }

      ::v-deep .pagination-container {
        text-align: right;
      }

    }
    .title{
      border-bottom: 1px solid #f1f1f1;
      padding-bottom: 5px;
      margin-bottom: 5px;
      margin-right: 10px;
    }
    .col{
      text-align: center;
      margin: 5px;
      padding: 5px;
    }
    .div_title{
      font-size: 16px;
      padding-bottom: 5px;
    }
    .div_num{
      font-size: 20px;
      font-weight: 900;
    }
  }
</style>
